<template>
  <div>
    <transition name="moveL1">
      <div
        class="watchUserBox"
        :class="isVisible ? 'showWatchUserBox' : 'hideWatchUserBox'"
      >
        <div class="controlUserBox">
          <div
            class="control_user"
            v-if="
              nest.nest_factory_code == 'DJI' &&
              debuggerUserInfo &&
              debuggerUserInfo.user_name
            "
          >
            <div class="jianshi_img">
              <img src="../../../assets/icons/tiaoshi.png" alt="" />
            </div>
            <span> 调试 : </span>
            <p>
              <span v-if="debuggerUserInfo && debuggerUserInfo.user_name"
                >{{ debuggerUserInfo.user_name }}
              </span>
              <span v-else>无</span>
            </p>
          </div>
          <div class="control_user" v-if="nest.nest_factory_code == 'DJI'">
            <div class="jianshi_img">
              <img src="../../../assets/icons/jiankong.png" alt="" />
            </div>
            <span> 控制 : </span>
            <p>
              <span v-if="controlerUserInfo && controlerUserInfo.user_name"
                >{{ controlerUserInfo.user_name }}
              </span>
              <span v-else>无</span>
            </p>
          </div>
          <div class="monitor_user">
            <div class="jianshi_img">
              <img src="../../../assets/icons/jianshi.png" alt="" />
            </div>

            <span>监视 : </span>

            <template>
              <div v-for="(item, index) in filteredUserList" :key="index">
                <p v-if="item.user_name">
                  <span
                    v-for="(itermnum, indexnum) in item.connection_count"
                    :key="index + '_' + indexnum"
                  >
                    {{ item.user_name ? item.user_name : "" }}
                    <i
                      style="color: #fff"
                      v-if="
                        item.connection_count > 1 &&
                        indexnum != item.connection_count - 1 &&
                        itermnum != item.connection_count
                      "
                      >,</i
                    >
                  </span>
                </p>
                <i
                  style="color: #fff"
                  v-if="filteredUserList.length !== index + 1 && item.user_name"
                  >,</i
                >
              </div>
              <template v-if="watchUserList.length > 5"
                ><i style="padding-left: 5px"> ···</i></template
              >
            </template>
          </div>
        </div>
      </div>
    </transition>

    <transition name="moveL1">
      <div v-if="isShow" v-show="isVisible" class="wrap">
        <!--标题-->
        <div class="nest_name">
          <span>
            {{ nest.nest_name }}
          </span>
          <svg-icon
            style="position: absolute; right: 30px; cursor: pointer"
            icon-class="shousuo_L"
            @click="isShowModule(false)"
          />
        </div>
        <!--状态图标-->
        <div class="nest_status">
          <ul class="nest_status_list">
            <li
              :title="nestArgs.mpsConnected ? '服务器已连接' : '服务器未连接'"
            >
              <div class="nest_status_item bg_1">
                <span
                  class="nest_status_item_marking"
                  :class="[
                    nestArgs.mpsConnected
                      ? 'marking_green_color'
                      : 'marking_red_color',
                  ]"
                />
              </div>
            </li>
            <li
              :title="
                nestArgs.nestConnected === 1 ? '基站已连接' : '基站未连接'
              "
            >
              <div class="nest_status_item bg_2">
                <span
                  class="nest_status_item_marking"
                  :class="[
                    nestArgs.nestConnected === 1
                      ? 'marking_green_color'
                      : 'marking_red_color',
                  ]"
                />
              </div>
            </li>
            <li
              :title="
                nestArgs.isRemoteControllerConnected
                  ? '遥控器已连接'
                  : '遥控器未连接'
              "
            >
              <div class="nest_status_item bg_3">
                <span
                  class="nest_status_item_marking"
                  :class="[
                    nestArgs.isRemoteControllerConnected
                      ? 'marking_green_color'
                      : 'marking_red_color',
                  ]"
                />
              </div>
            </li>
            <li
              :title="
                nestArgs.isAircraftConnected ? '无人机已连接' : '无人机未连接'
              "
            >
              <div class="nest_status_item bg_4">
                <span
                  class="nest_status_item_marking"
                  :class="[
                    nestArgs.isAircraftConnected
                      ? 'marking_green_color'
                      : 'marking_red_color',
                  ]"
                />
              </div>
            </li>
            <li :title="getSdMemoryUseRateText()">
              <div class="nest_status_item bg_5">
                <el-progress
                  class="nest_status_item_progress"
                  style="right: -9px; top: 6px"
                  :percentage="nestArgs.airSdMemoryUseRate"
                  type="line"
                  :show-text="false"
                  :color="[
                    nestArgs.airSdMemoryUseRate > 20 ? '#28B80A' : '#ef2100',
                  ]"
                  :stroke-width="3"
                />
              </div>
            </li>
            <li :title="getCpsMemoryUseRateText()">
              <div class="nest_status_item bg_6">
                <el-progress
                  class="nest_status_item_progress"
                  style="right: -11px; top: 6px"
                  :color="[
                    nestArgs.cpsMemoryUseRate > 20 ? '#28B80A' : '#ef2100',
                  ]"
                  :percentage="nestArgs.cpsMemoryUseRate"
                  type="line"
                  :show-text="false"
                  :stroke-width="3"
                />
              </div>
            </li>
            <li :title="'保质期截止时间' + nestArgs.aircraftDeadline">
              <div class="nest_status_item" style="width: 20px; height: 20px">
                <svg-icon
                  icon-class="nest_shelf_icon"
                  style="height: 20px; width: 20px"
                />
              </div>
            </li>
          </ul>
        </div>
        <!--机巢状态-->
        <div class="nest_buz_wrap" style="flex: 6.5; height: 0">
          <div class="nest_title">
            <div class="nest_title_border">
              <span>机巢状态</span>
            </div>
          </div>
          <div class="nest_box">
            <div class="nest_box_status">
              {{ nestArgs.aircraftStateConstant }}
            </div>
            <div class="nest_anim1_wrap">
              <div ref="ref_anim1_cabin" class="box_anim1" />
              <div ref="ref_anim1_box" class="box_anim2">
                <div
                  v-show="showUavV"
                  ref="ref_anim1_uav"
                  class="box_anim2_wrap"
                />
                <div ref="ref_anim1_lift" class="box_anim4" />
              </div>
              <div class="box_anim2_wrap">
                <div ref="ref_anim2_bar1" class="bar bar1_position" />
                <div ref="ref_anim2_bar2" class="bar bar2_position" />
                <div ref="ref_anim2_bar3" class="bar bar3_position" />
                <div ref="ref_anim2_bar4" class="bar bar4_position" />
                <transition name="fade">
                  <div v-show="showUavH" ref="ref_anim2_uav">
                    <svg-icon class="box_anim_uav" icon-class="UAV" />
                  </div>
                </transition>
              </div>
            </div>
            <div class="nest_box_args">
              <span>舱门状态:</span>
              <span class="next_box_args_value">{{ nestArgs.cabinState }}</span>
            </div>
            <div class="nest_box_args">
              <span>平台状态:</span>
              <span class="next_box_args_value">{{ nestArgs.liftState }}</span>
            </div>
            <div class="nest_box_args">
              <span>归中状态:</span>
              <span class="next_box_args_value">{{ nestArgs.syncState }}</span>
            </div>
          </div>
          <div class="nest_title">
            <div class="nest_title_border">
              <span>机巢状态</span>
            </div>
          </div>
        </div>
        <!--温度参数-->
        <div class="nest_buz_wrap" style="flex: 2.5; height: 0">
          <div class="nest_temp">
            <div class="nest_args">
              <div class="nest_args_key">空调状态</div>
              <div class="next_args_value">
                {{
                  nestArgs.temperatureSystemState
                    ? nestArgs.temperatureSystemState
                    : "未知"
                }}
              </div>
            </div>
            <div class="nest_args">
              <div class="nest_args_key">舱内温度</div>
              <div class="next_args_value">
                {{ nestArgs.insideTemperature }}°C
              </div>
            </div>
            <div class="nest_args">
              <div class="nest_args_key">电池温度</div>
              <div class="next_args_value">
                {{ nestArgs.batteryTemperature }}°C
              </div>
            </div>
          </div>
          <div class="nest_title">
            <div class="nest_title_border">
              <span>温度参数</span>
            </div>
          </div>
        </div>
        <!--电池参数-->
        <div class="nest_buz_wrap" style="flex: 5; height: 0">
          <div class="nest_battery">
            <div class="nest_battery_status">
              <div class="nest_mission_item">
                <icon-key-value-comp
                  name="充电状态"
                  width="140px"
                  :value="nestArgs.chargeStr"
                  svg-icon="power"
                />
              </div>
              <div class="nest_mission_item">
                <icon-key-value-comp
                  name="电源状态"
                  width="140px"
                  :value="nestArgs.state"
                  svg-icon="charge"
                />
              </div>
            </div>
            <div class="nest_args" style="margin-top: 5px">
              <div class="nest_args_key">电流</div>
              <div class="next_args_value">{{ nestArgs.current }}A</div>
            </div>

            <div class="nest_args" style="margin-top: 5px">
              <div class="nest_args_key">电压</div>
              <div class="next_args_value">{{ nestArgs.voltage }}V</div>
            </div>

            <div class="nest_args" style="margin-top: 5px">
              <div class="nest_args_key">充放电</div>
              <div class="next_args_value">
                {{ nestArgs.aircraftBatteryNumberOfDischarges }}次
              </div>
            </div>
          </div>
          <div class="nest_title">
            <div class="nest_title_border">
              <span>电池参数</span>
            </div>
          </div>
          <div class="nest_battery_anim">
            <div class="battery_comp">
              <div class="nothing" />
              <div
                ref="ref_controller_power"
                class="progress"
                :style="{
                  background: `linear-gradient(to right, green ${nestArgs.aircraftBatteryChargeInPercent}%, grey 0%) no-repeat`,
                }"
              >
                {{ nestArgs.aircraftBatteryChargeInPercent }}%
              </div>
            </div>
            <div class="bg_4" style="margin-left: 5px; margin-right: 5px" />
            <div
              v-if="nestArgs.isRemoteControllerConnected"
              class="battery_comp"
            >
              <div class="nothing" />
              <div
                ref="ref_uav_power"
                class="progress"
                :style="{
                  background: `linear-gradient(to right, green ${nestArgs.rcPercentage}%, grey 0%) no-repeat`,
                }"
              >
                {{ nestArgs.rcPercentage }}%
              </div>
            </div>
            <div
              v-if="nestArgs.isRemoteControllerConnected"
              class="bg_3"
              style="margin-right: 5px"
            />
          </div>
        </div>
        <!--飞行任务-->
        <div class="nest_buz_wrap" style="flex: 7; height: 0">
          <div class="nest_mission">
            <div
              class="nest_mission_anim"
              :style="{
                background: `linear-gradient(to right, #0D496A ${
                  missionShow.percent * 100
                }%, rgb(0,0,0,0) 0%) no-repeat`,
              }"
            >
              <div class="nest_mission_name">{{ missionShow.record_name }}</div>
              <div
                style="display: flex; flex-direction: column; align-items: end"
              >
                <div class="nest_mission_number">
                  {{ (missionShow.percent * 100).toFixed(2) }}%
                </div>
                <div class="nest_mission_time">
                  预计耗时：{{ (missionShow.predic_time / 60).toFixed(2) }}分钟
                </div>
              </div>
            </div>
            <div class="nest_mission_item">
              <icon-key-value-comp
                name="速度"
                width="120px"
                :value="missionShow.speed"
                svg-icon="md-speedometer"
              />
            </div>
            <div class="nest_mission_item">
              <icon-key-value-comp
                name="数据同步"
                width="120px"
                :value="missionShow.current_state"
                svg-icon="database"
              />
            </div>

            <div
              v-if="false"
              class="nest_args"
              style="padding-left: 10px; text-align: left"
            >
              <span class="nest_args_key">预设任务航速:</span>
              <span class="nest_args_value"> 8米/秒</span>
            </div>
            <div class="nest_args" style="padding-left: 10px; text-align: left">
              <span class="nest_args_key">航点数量:</span>
              <span class="nest_args_value2"
                >{{ missionShow.waypoints_num }}个</span
              >
            </div>
            <div
              v-if="false"
              class="nest_args"
              style="padding-left: 10px; text-align: left; margin-top: 5px"
            >
              <span class="nest_args_key">预设往返速度:</span>
              <span class="nest_args_value">15米/秒</span>
            </div>
            <div class="nest_args" style="padding-left: 10px; text-align: left">
              <span class="nest_args_key">预计拍照:</span>
              <span class="nest_args_value2">{{ missionShow.photos }}张</span>
            </div>
          </div>
          <div class="nest_title">
            <div class="nest_title_border">
              <span>飞行任务</span>
            </div>
          </div>
          <div class="nest_mission_distance">
            <span>{{ aircraftAltitude }}米</span>
            <svg-icon class="distance_svg_icon" icon-class="uav_height" />

            <span>{{ missionShow.predic_miles }}米</span>
            <svg-icon class="distance_svg_icon" icon-class="uav_path" />
          </div>
        </div>
      </div>
    </transition>
    <!--展开按钮-->
    <div v-show="!isVisible" class="showbtn" @click="isShowModule(true)">
      <svg-icon icon-class="shousuo_R" />
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { io } from "socket.io-client";
import IconKeyValueComp from "@/views/components/NestAndAircraftSubComps/baseComps/iconKeyValueComp";

// 0:需复位 1:原点（关闭） 2:中间点 3:终点（开启） 4:复位中 5:加速状态 6:匀速状态 7:减速状态 8:运动超时 9:传感器触发超时 10:传感器触发错误
const CabinStateList = [
  "需复位",
  "关闭",
  "中间点",
  "开启",
  "复位中",
  "加速状态",
  "匀速状态",
  "减速状态",
  "运动超时",
  "传感器触发超时",
  "传感器触发错误",
];
// 0:需复位 1:原点（已下降） 2:中间点 3:终点（已升起） 4:复位中 5:加速状态 6:匀速状态 7:减速状态 8:运动超时 9:传感器触发超时 10:传感器触发错误 12: 推杆同步器通讯错误13: 推杆同步器霍尔 电机位置脉冲错误 14: 推杆同步器错误
const LiftStateList = [
  "需复位",
  "原点",
  "中间点",
  "终点",
  "复位中",
  "加速状态",
  "匀速状态",
  "减速状态",
  "运动超时",
  "传感器触发超时",
  "传感器触发错误",
  "",
  "推杆同步器通讯错误",
  "推杆同步器霍尔电机位置脉冲错误",
  "推杆同步器错误",
];
// 0:需复位 1:原点（松开） 2:中间点 3:终点（收紧） 4:复位中 5:加速状态 6:匀速状态 7:减速状态 8:运动超时 9:传感器触发超时 10:传感器触发错误 11:步进电机驱动器错误
const SyncStateList = [
  "需复位",
  "原点",
  "中间点",
  "终点",
  "复位中",
  "加速状态",
  "匀速状态",
  "减速状态",
  "运动超时",
  "传感器触发超时",
  "传感器触发错误",
  "步进电机驱动器错误",
];
// 255:电池错误 0:未充电 1:充电中 2:充电完毕 3:充电过流 4:充电过温 5:强制充电中
const StateList = [
  "未知",
  "已关机",
  "已开机",
  "关机中",
  "开机中",
  "归中释放",
  "开机错误",
  "关机错误",
];

const chargeStateStrList = {
  0: "未充电",
  1: "充电中",
  2: "充电完毕",
  3: "充电过流",
  4: "充电过温",
  5: "强制充电中",
  6: "断续充电中",
  7: "电池过冷",
  8: "温度传感器异常",
  9: "电池电压过低",
  10: "电池解锁中",
  255: "电池错误",
  32: "充电准备",
  33: "预充电中",
  40: "未检测到电池",
  41: "电池已开机",
  42: "归中 Y 未夹紧",
  43: "等待开机完成",
  44: "等待关机完成",
  45: "充电暂停",
  46: "充电中断",
  64: "开启强制充电",
  65: "停止充电",
  248: "电压过低",
  249: "电压过高",
  250: "电流过低",
  251: "电流过高",
  252: "温度过低",
  253: "温度过高",
  254: "电池通讯异常",
};
export default {
  name: "NestInfoComp",
  components: { IconKeyValueComp },
  props: {
    isShow: {
      type: Boolean,
      default: () => true,
    },
    title: {
      type: String,
      default: () => "未登记",
    },
    nest: {
      type: Object,
      default: () => {},
    },
    nestInfo: {
      type: Object,
      default: () => {},
    },
    missionInfo: {
      type: Object,
      default: () => {},
    },
    aircraftInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      missionProgress: 30,
      showUavH: false,
      showUavV: false,
      //
      nestArgs: "",
      missionShow: {},
      aircraftAltitude: "N",
      timer: undefined,
      isVisible: true,
      isFlying: false,
      watchUserList: [], // 观看者监视信息
      controlerUserInfo: [], //控制者信息
      debuggerUserInfo: {},
    };
  },
  watch: {
    isFlying(newVal, oldVal) {
      if (newVal && !oldVal) {
        this.$bus.emit("startFlying");
      } else {
        this.$bus.emit("finishFlying");
      }
    },
    nestInfo(val) {
      this.nestInfo2Show();
      // this.uploadAnimState()
    },
    missionInfo(val) {
      // console.log('nestInfoCompWatch mission', val)
      this.mission2Show();
    },
    aircraftInfo(val) {
      // console.log('nestInfoCompWatch aircraftInfo1', val)
      this.aircraftInfo2Show();
    },
    nest(val) {
      var _this = this;
      if (KBSocket) {
        KBSocket?.io.emit("monitor", {
          nest_code: _this.nest.nest_code,
          method: "exit",
        });
        _this.initWatchSocket(_this.nest.nest_code);
      }
    },
  },
  computed: {
    filteredUserList() {
      return this.watchUserList.slice(0, 5); // 只返回前四个元素
    },
  },
  mounted() {
    var _this = this;
    console.log("nestInfoComp mounted2", this.nest);
    // if(_this.nest.nest_factory_code=='DJI'){
    _this.initWatchSocket(_this.nest.nest_code);
    // }
    this.initTransition();
    this.setDefaultData();
    this.nestInfo2Show();
    this.mission2Show();
    this.aircraftInfo2Show();
    this.$bus.on("showNestComp", (show) => {
      this.isShowModule(show);
      // this.isVisible = show
    });
  },

  methods: {
    initWatchSocket(codeId) {
      var that = this;
      that.watchUserList = [];
      //  订阅主题monitor,join加入控制权
      KBSocket?.io.emit("monitor", {
        nest_code: codeId,
        method: "join",
      });
      KBSocket?.io.on("monitor_users", function (res) {
        if (res.observers) {
          that.watchUserList = res.observers; // 观看者列表
          that.debuggerUser = res.debugger; // 调试者
        }
        if (res.operator) {
          that.controlerUserInfo = res.operator;
        } else {
          // 没有控制者
          that.controlerUserInfo = {};
        }
        if (res.debugger) {
          that.debuggerUserInfo = res.debugger;
        } else {
          that.debuggerUserInfo = {};
        }
      });
    },
    getSdMemoryUseRateText() {
      if (this.nestArgs && this.nestArgs.airSdMemoryUseRate !== null) {
        return "无人机sd卡已用空间" + this.nestArgs.airSdMemoryUseRate + "%";
      } else {
        return "无人机sd卡已用空间N%";
      }
    },
    getCpsMemoryUseRateText() {
      if (this.nestArgs && this.nestArgs.cpsMemoryUseRate !== null) {
        return "cps已用空间" + this.nestArgs.cpsMemoryUseRate.toFixed(0) + "%";
      } else {
        return "无cps已用空间N%";
      }
    },
    setDefaultData() {
      // this.nestInfo = this.$store.getters.nestList.filter(item => {
      //   return item.nestId === this.nestId
      // })[0]
      //
      this.nestArgs = {
        //
        mpsConnected: false,
        nestConnected: 0,
        isAircraftConnected: false,
        isRemoteControllerConnected: false,
        airSdMemoryUseRate: 0,
        cpsMemoryUseRate: 0,
        aircraftDeadline: "N",
        //
        aircraftStateConstant: "未连接",
        cabinState: "未知",
        liftState: "未知",
        syncState: "未知",
        //
        temperatureSystemState: "未知",
        insideTemperature: "N",
        batteryTemperature: "N",
        //
        aircraftBatteryChargeInPercent: 0,
        rcPercentage: -1,
        chargeStr: "未知",
        state: "未知",
        current: "N",
        voltage: "N",
        aircraftBatteryNumberOfDischarges: "N",
        //
      };
      this.missionShow = {
        predic_miles: "N",
        predic_time: 0,
        waypoints_num: "N",
        record_name: "待机中...",
        speed: "0m/s",
        photos: "N",
        percent: 0,
        current_state: "未知",
      };
      this.aircraftAltitude = "N";
    },
    nestInfo2Show() {
      if (this.nestInfo.aircraftStateConstant) {
        this.setShowDate(this.nestInfo);
        // todo 设置无人机动画状态
        this.uploadAnimState();
      }
    },
    mission2Show() {
      if (
        (this.missionInfo &&
          this.nestInfo.aircraftStateConstant === "UNKNOWN" &&
          this.missionInfo.current_state === "IDLE") ||
        this.missionInfo === null
      ) {
        this.missionShow = {
          predic_miles: "N",
          predic_time: 0,
          waypoints_num: "N",
          record_name: "待机中...",
          speed: "0m/s",
          photos: "N",
          percent: 0,
          current_state: "未知",
        };
      } else {
        this.missionShow = {
          predic_miles: this.missionInfo.predic_miles,
          predic_time: this.missionInfo.predic_time,
          waypoints_num: this.missionInfo.waypoints_num,
          record_name: this.missionInfo.record_name,
          speed: this.getMissionSpeed(),
          photos: this.missionInfo.photos,
          percent: this.missionInfo.percent_new,
          current_state: this.getSCurrentState(this.missionInfo.current_state),
        };
      }
    },
    aircraftInfo2Show() {
      if (this.aircraftInfo && this.aircraftInfo.aircraftAltitude) {
        this.aircraftAltitude = this.aircraftInfo.aircraftAltitude.toFixed(2);
      }
    },
    getMissionSpeed() {
      return this.missionInfo?.waypoints?.generalInfo?.auto_fly_speed
        ? this.missionInfo?.waypoints?.generalInfo?.auto_fly_speed?.toFixed(2) +
            "m/s"
        : "Nm/s";
    },
    getSCurrentState(state) {
      switch (state) {
        case "IDLE":
          return "空闲";
        case "DOWNLOADING":
          return "下载中";
        case "UPLOADING":
          return "下载中";
        case "DOWNLOAD_UPLOAD_MEANWHILE":
          return "边下载边上传";
        case "FORMATTING":
          return "格式化中";
        case "DELETING":
          return "删除中";
        case "UNKNOWN":
          return "未知";
        default:
          return "未知";
      }
    },

    initTransition() {
      // this.$refs.ref_controller_power.setAttribute('ba',this.controllerPower)
      // this.$refs.ref_controller_power.style.backgroundImage = 'linear-gradient(to right, green 80%, grey 0%) no-repeat;'
      // this.$refs.ref_controller_power.style.background = 'rgb(255,255,255,0)'
      this.$refs.ref_anim1_cabin.style.transition = "transform 2s";
      this.$refs.ref_anim1_box.style.transition = "transform 2s";
      this.$refs.ref_anim1_uav.style.transition = "transform 2s";
      this.$refs.ref_anim1_lift.style.transition = "transform 2s";
      //
      this.$refs.ref_anim2_bar1.style.transition = "transform 2s";
      this.$refs.ref_anim2_bar2.style.transition = "transform 2s";
      this.$refs.ref_anim2_bar3.style.transition = "transform 2s";
      this.$refs.ref_anim2_bar4.style.transition = "transform 2s";
      this.$refs.ref_anim2_uav.style.transition = "transform 2s";
    },
    /**
     * 小机巢的动画状态（不适用于大机巢）
     */
    uploadAnimState() {
      if (
        this.nest.nest_type_id === 5 ||
        this.nest.nest_type_id === 10 ||
        this.nest.nest_type_id === 11
      ) {
        this.uploadType5();
      } else if (this.nest.nest_type_id === 2 || this.nest.nest_type_id === 8) {
        this.uploadType2();
      } else {
        // this.$message('没有对应的机巢型号')
      }
    },
    // 小机巢
    uploadType5() {
      // 归中杆 syncState
      if (this.nestInfo.syncState === 3) {
        this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(0px)";
        this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(0px)";
        this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(0px)";
        this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(0px)";
      } else if (this.nestInfo.syncState === 2) {
        this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(-7px)";
        this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(7px)";
        this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(-7px)";
        this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(7px)";
      } else {
        this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(-15px)";
        this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(15px)";
        this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(-15px)";
        this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(15px)";
      }
      // 升降台 liftState
      if (this.nestInfo.liftState === 1) {
        this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(0px)";
      } else if (this.nestInfo.liftState === 2) {
        this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(-13px)";
      } else {
        this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(-26px)";
      }
      // 舱门
      if (this.nestInfo.cabinState === 1) {
        this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(0px)";
      } else if (this.nestInfo.cabinState === 2) {
        this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(-85px)";
      } else {
        this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(-170px)";
      }
      // 飞机
      if (this.nestInfo.aircraftStateConstant !== "FLYING") {
        this.showUavV = true;
        this.showUavH = true;
        if (this.nestInfo.liftState === 1) {
          this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(0px)";
        } else {
          this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-26px)";
        }
      } else {
        this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-200px)";
        setTimeout(() => {
          this.showUavV = false;
          this.showUavH = false;
        }, 1000);
      }
    },
    // 大机巢
    uploadType2() {
      // 归中杆 syncState
      if (this.nestInfo.syncState === 1) {
        this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(0px)";
        this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(0px)";
        this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(0px)";
        this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(0px)";
      } else {
        this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(-15px)";
        this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(15px)";
        this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(-15px)";
        this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(15px)";
      }
      // 升降台 liftState
      if (this.nestInfo.liftState === 1) {
        this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(0px)";
      } else {
        this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(-26px)";
      }
      // 舱门  0:需复位 1:原点（关闭） 2:中间点 3:终点（开启） 4:复位中 5:加速状态 6:匀速状态 7:减速状态 8:运动超时 9:传感器触发超时 10:传感器触发错误
      // 2 原点  终点
      if (this.nestInfo.cabinState === 2) {
        this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(0px)";
      } else {
        this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(-170px)";
      }
      // 飞机
      if (this.nestInfo.aircraftStateConstant !== "FLYING") {
        this.showUavV = true;
        this.showUavH = true;
        if (this.nestInfo.liftState === 1) {
          this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(0px)";
        } else {
          this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-26px)";
        }
      } else {
        this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-200px)";
        setTimeout(() => {
          this.showUavV = false;
          this.showUavH = false;
        }, 1000);
      }
    },
    setShowDate(info) {
      if (info.nestConnected !== 0) {
        // console.log("setShowDate info", info);
        // console.log("setShowDate nest", this.nest.nest_type_id);
        this.nestArgs = {
          //
          mpsConnected: info.mpsConnected,
          nestConnected: info.nestConnected,
          isAircraftConnected: info.isAircraftConnected,
          isRemoteControllerConnected: info.isRemoteControllerConnected,
          aircraftDeadline: info.aircraftDeadline,
          airSdMemoryUseRate: info.airSdMemoryUseRate * 100,
          cpsMemoryUseRate: info.cpsMemoryUseRate * 100,
          //
          aircraftStateConstant: this.getAircraftState(info),
          //
          cabinState: this.getCabinState(),
          liftState: this.getLiftState(),
          syncState: this.getSyncState(),
          //
          temperatureSystemState: info.temperatureSystemState,
          insideTemperature: info.insideTemperature,
          batteryTemperature: info.batteryTemperature,
          //
          aircraftBatteryChargeInPercent: this.getAircraftBattery(
            info.aircraftBatteryChargeInPercent
          ),
          rcPercentage: info.rcPercentage === -1 ? 0 : info.rcPercentage,
          chargeStr:
            this.nest.nest_type_id === 2
              ? chargeStateStrList[info.aircraftPowerState + ""]
              : info.chargeStr,
          state:
            info.aircraftPowerState < 10
              ? StateList[info.aircraftPowerState]
              : "未知",
          current: info.current ? info.current.toFixed(2) : "0",
          voltage: info.voltage ? info.voltage.toFixed(1) : "0",
          aircraftBatteryNumberOfDischarges:
            info.aircraftBatteryNumberOfDischarges,
          //
        };
      }
    },
    getAircraftState(info) {
      this.isFlying = info.aircraftStateConstant === "FLYING";
      //
      switch (info.aircraftStateConstant) {
        case "UNKNOWN":
          if (info.state === 1) {
            return "充电中";
          } else {
            return "无人机下线";
          }
        case "UNKNOW":
          if (info.state === 1) {
            return "充电中";
          } else {
            return "无人机下线";
          }
        case "READY_TO_GO":
          return "准备起降";
        case "FLYING":
          return "飞行中";
      }
    },
    /**
     * 19,  大疆手控
     * 10,11 大疆
     * 2,5,8 中科
     */
    getCabinState() {
      if (
        this.nest.nest_type_id === 5 ||
        this.nest.nest_type_id === 10 ||
        this.nest.nest_type_id === 11
      ) {
        return CabinStateList[this.nestInfo.cabinState];
      } else if (this.nest.nest_type_id === 2 || this.nest.nest_type_id === 8) {
        if (this.nestInfo.cabinState === 2) {
          return "关闭";
        } else {
          return "开启";
        }
      }
    },
    getLiftState() {
      if (
        this.nest.nest_type_id === 5 ||
        this.nest.nest_type_id === 10 ||
        this.nest.nest_type_id === 11
      ) {
        return LiftStateList[this.nestInfo.liftState];
      } else if (this.nest.nest_type_id === 2 || this.nest.nest_type_id === 8) {
        if (this.nestInfo.liftState === 2) {
          return "终点";
        } else {
          return "原点";
        }
      }
    },
    getSyncState() {
      if (
        this.nest.nest_type_id === 5 ||
        this.nest.nest_type_id === 10 ||
        this.nest.nest_type_id === 11
      ) {
        return SyncStateList[this.nestInfo.syncState];
      } else if (this.nest.nest_type_id === 2 || this.nest.nest_type_id === 8) {
        if (this.nestInfo.syncState === 2) {
          return "终点";
        } else {
          return "原点";
        }
      }
    },
    getAircraftBattery(info) {
      // todo 处理str  80%-100%
      if (!info) {
        return "0%";
      }
      const tempArr = info.toString().split("-");
      if (tempArr.length > 1) {
        return tempArr[1].split("%")[0];
      } else {
        return tempArr[0].split("%")[0];
      }
    },
    // 起飞
    startFly() {
      this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-26px)";
      this.animOpenNestBox();
      //
      setTimeout(() => {
        this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-200px)";
        this.showUavH = false;
        this.animCloseNestBox();
      }, 1500);
    },
    // 飞行中
    onFly() {
      // this.$refs.ref_box_anim3.style.WebkitTransform = 'translateY(-200px)'
      this.showUavV = false;
      this.showUavH = false;
    },
    // 回收
    finishFly() {
      return false;
      this.animOpenNestBox();
      this.showUavV = true;
      this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(-26px)";
      setTimeout(() => {
        this.showUavH = true;
        this.$refs.ref_anim1_uav.style.WebkitTransform = "translateY(0px)";
        this.animCloseNestBox();
      }, 1800);
    },
    animOpenNestBox() {
      this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(-170px)";
      this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(-26px)";
      //
      this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(-15px)";
      this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(15px)";
      this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(-15px)";
      this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(15px)";
    },
    animCloseNestBox() {
      this.$refs.ref_anim1_cabin.style.WebkitTransform = "translateX(0px)";
      this.$refs.ref_anim1_lift.style.WebkitTransform = "translateY(0px)";
      //
      this.$refs.ref_anim2_bar1.style.WebkitTransform = "translateX(0px)";
      this.$refs.ref_anim2_bar2.style.WebkitTransform = "translateX(0px)";
      this.$refs.ref_anim2_bar3.style.WebkitTransform = "translateY(0px)";
      this.$refs.ref_anim2_bar4.style.WebkitTransform = "translateY(0px)";
    },
    // todo 待办
    // 舱门打开
    // 舱门关闭
    // 平台升
    // 平台降
    // 归中杆锁
    // 归中杆打开
    // 飞机起飞
    // 飞机降落
    // 飞机在机巢
    // 飞机不在机巢
    isShowModule(val) {
      this.isVisible = val;
    },
    //
    getVisibleState() {
      return this.isVisible;
    },
  },
  beforeDestroy() {
    var _this = this;
    if (KBSocket) {
      KBSocket?.io.emit("monitor", {
        nest_code: _this.nest.nest_code,
        method: "exit",
      });

      _this.controlerUserInfo = {};
    }
  },
};
</script>

<style scoped lang="scss">
$text-color-white: #ffffff;
$text-color-grey: #aaa;
$text-color-blue: #18aaf2;
$text-color-light-blue: #40e0d0;

$border-color-grey: rgba(150, 150, 150, 0.5);
* {
  caret-color: transparent;
}

.moveL1-enter-active,
.moveL1-leave-active {
  transition: all 0.5s ease;
  transform: translateX(0);
}

.moveL1-enter,
.moveL1-leave {
  transform: translateX(-300%);
}

.moveL1-leave-to {
  transform: translateX(-300%);
}
.watchUserBox {
  position: absolute;
  top: vh(75);
  transition: all 0.3s;
  color: #ffffff;
  z-index: 1000;
}
.showWatchUserBox {
  left: 355px;
}
.hideWatchUserBox {
  left: 50px;
}
.wrap {
  pointer-events: all;
  position: absolute;
  top: vh(60);
  left: 20px;
  height: vh(1000);
  padding: 5px;

  transition: all 0.5s;
  background: rgba(5, 29, 40, 0.8);
  color: $text-color-white;
  z-index: 999;
  box-sizing: border-box;
  width: 330px;
  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  border-radius: 35px 35px 0 0;
  //复用格式
  .nest_args {
    text-align: center;

    .nest_args_key {
      font-size: 12px;
      font-weight: 800;
      color: $text-color-grey;
    }

    .next_args_value {
      margin-top: 5px;
      font-size: 20px;
      color: $text-color-white;
    }

    .nest_args_value2 {
      margin-left: 5px;
      font-size: 20px;
      color: $text-color-white;
    }
  }

  //复用格式
  .nest_title {
    position: absolute;
    top: vh(-20);
    grid-column-start: 1;
    grid-column-end: 4;
    //margin: vh(14) 0;
    font-size: 12px;
    text-align: left;

    .nest_title_border {
      //background: rgba(5, 29, 40, 0.9) url('~@/assets/border/y1.png') no-repeat left;
      border: #20a0ff 1px solid;
      background: rgba(5, 29, 40, 0.9);
      padding: vh(10) 0;
    }

    span {
      color: $text-color-blue;
      background: url("~@/assets/small_title_bg.png") no-repeat center;
      background-size: 120px vh(12);
      padding: vh(15) 40px;
    }
  }

  .nest_buz_wrap {
    position: relative;
    width: 100%;
    margin-top: vh(28);
  }

  .bg_1 {
    background: url("~@/assets/sprite/sprite.png") no-repeat -257px -32px;
    width: 14px;
    height: 16px;
    background-size: 2016px 400px;
  }

  .bg_2 {
    background: url("../images/sprite.png") no-repeat -287px -33px;
    width: 17px;
    height: 14px;
    background-size: 2016px 400px;
  }

  .bg_3 {
    background: url("../images/sprite.png") no-repeat -319px -33px;
    width: 17px;
    height: 14px;
    background-size: 2016px 400px;
  }

  .bg_4 {
    background: url("../images/sprite.png") no-repeat -352px -33px;
    width: 15px;
    height: 15px;
    background-size: 2016px 400px;
  }

  .bg_5 {
    background: url("../images/sprite.png") no-repeat -385px -32px;
    width: 14px;
    height: 16px;
    background-size: 2016px 400px;
  }

  .bg_6 {
    background: url("../images/sprite.png") no-repeat -416px -32px;
    width: 15px;
    background-size: 2016px 400px;
    height: 15px;
  }

  //-----------------------
  .nest_name {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    text-align: center;
    padding: 10px 0;
    background: linear-gradient(#044d86 50%, #033057 50%) no-repeat;
    position: relative;
  }

  .nest_status {
    margin: 0;
    padding: 0;
    outline: none;

    .nest_status_list {
      border: $border-color-grey 1px solid;
      display: flex;
      align-items: center;
      height: 50px;
      margin: 0;
      padding-left: 10px;
      list-style: none;

      .nest_status_item {
        position: relative;
        margin-left: 15px;
        width: 17px;
        height: 16px;

        .nest_status_item_marking {
          position: absolute;
          right: 0;
          bottom: -2px;
          display: inline-block;
          width: 7px;
          height: 7px;
          border-radius: 50%;
        }

        .nest_status_item_progress {
          position: relative;
          width: 18px;
          transform: rotate(-90deg);
        }

        .marking_red_color {
          background: #ef2100;
        }

        .marking_green_color {
          background: #28b80a;
        }
      }
    }
  }

  .nest_box {
    height: 100%;
    background: no-repeat center url("~@/assets/border/y2.png");
    padding: 12px;
    background-size: 100% 100%;
    display: grid;
    //padding: 15px 10px;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 2px;
    grid-column-gap: 6px;
    //border: red 1px solid;

    .nest_box_status {
      grid-column-start: 1;
      grid-column-end: 4;
      //border: white 1px solid;
      text-align: center;
      margin: vh(20) auto 0 auto;
      font-size: 20px;
      font-weight: 600;
      background: url("../images/sprite.png") no-repeat 47.062% 14.933%;
      background-size: 2016px 400px;
      width: 280px;
      height: vh(25);
    }

    .nest_anim1_wrap {
      grid-column-start: 1;
      grid-column-end: 4;
      position: relative;
      padding: 20px 10px 10px 20px;
      display: flex;
      flex-direction: row;
      height: vh(120);
      overflow: hidden;

      .box_anim1 {
        position: absolute;
        left: 10px;
        top: vh(20);
        background: url("../images/sprite.png") no-repeat 1.726% 72.368%;
        background-size: 2016px 300px;
        width: 162px;
        height: vh(20);
        overflow: hidden;
        object-fit: cover; //重要
      }

      .box_anim2 {
        position: absolute;
        left: 10px;
        top: vh(15);
        margin-top: vh(30);
        background: url("../images/sprite.png") no-repeat 1.699% 88.987%;
        background-size: 2016px 400px;
        width: 163px;
        height: vh(60);

        .box_anim2_wrap {
          position: absolute;
          left: 45px;
          top: vh(7);
          background: url("../images/sprite.png") no-repeat 12.925% 72.919%;
          background-size: 2016px 400px;
          width: 74px;
          height: vh(22);
        }

        .box_anim4 {
          position: absolute;
          left: 2.5px;
          top: vh(30);
          background: url("../images/sprite.png") no-repeat 11.249% 78.497%;
          background-size: 2016px 400px;
          width: 158px;
          height: vh(14);
        }
      }

      .box_anim2_wrap {
        position: absolute;
        right: 10px;
        top: vh(20);
        width: vh(80);
        height: vh(80);
        background-color: #43505e;
        border-radius: 4px;
        //border: #bfcbd9 2px solid;

        .box_anim_uav {
          position: absolute;
          top: vh(15);
          left: vh(15);
          height: vh(50);
          width: vh(50);
          //transition:width 2s, height 2s, background-color 2s, transform 2s ;
        }

        .bar {
          border-radius: 2px;
          background-color: grey;
          border: #ffd300 2px solid;
        }

        .bar1_position {
          position: absolute;
          top: vh(13);
          left: vh(22);
          width: vh(7);
          height: vh(55);
        }

        .bar2_position {
          position: absolute;
          top: vh(13);
          left: vh(50);
          width: vh(8);
          height: vh(55);
        }

        .bar3_position {
          position: absolute;
          top: vh(22);
          left: vh(13);
          width: vh(55);
          height: vh(8);
        }

        .bar4_position {
          position: absolute;
          top: vh(50);
          left: vh(13);
          width: vh(55);
          height: vh(7);
        }
      }
    }

    .nest_box_args {
      text-align: center;
      border: #bfcbd9 1px solid;
      padding: 4px 0;
      font-size: 14px;

      .next_box_args_value {
        color: $text-color-light-blue;
      }
    }
  }

  .nest_temp {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: rgba(5, 29, 40, 0.9);
    background: no-repeat center url("~@/assets/border/y2.png");
    padding: 24px 12px 12px 12px;
    background-size: 100% 100%;
  }

  .nest_battery {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    background: rgba(5, 29, 40, 0.9);
    background: no-repeat center url("~@/assets/border/y2.png");
    padding: 24px 12px 12px 12px;
    background-size: 100% 100%;

    .nest_battery_status {
      grid-column-start: 1;
      grid-column-end: 4;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      margin-top: 10px;
    }
  }

  .nest_battery_anim {
    position: absolute;
    top: 10px;
    right: 0;
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    .nest_battery_progress {
      width: 30px;
    }
  }

  .nest_mission {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(5, 29, 40, 0.9);

    background: no-repeat center url("~@/assets/border/y2.png");
    padding: 24px 12px 12px 12px;
    background-size: 100% 100%;

    .nest_mission_title {
      color: $text-color-blue;
      grid-column-start: 1;
      grid-column-end: 3;
      margin: 20px 0;

      span {
        padding: 20px 50px;
        border: white 1px solid;
      }
    }

    .nest_mission_anim {
      grid-column-start: 1;
      grid-column-end: 3;
      display: flex;
      margin-top: vh(10);
      padding: vh(6) 4px;
      width: 100%;
      border: $border-color-grey 1px solid;
      justify-content: space-between;
      align-items: center;
      //background: linear-gradient(to right, #0D496A 20%, #0D496A 0%) no-repeat;
      background-size: 30% 100%;

      .nest_mission_name {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 170px;
        margin-left: 5px;
      }

      .nest_mission_number {
        font-size: 14px;
      }

      .nest_mission_time {
        font-size: 11px;
        color: $text-color-grey;
      }
    }

    .nest_mission_item {
      padding: 4px;
      margin: vh(10) auto;
    }
  }

  .nest_mission_distance {
    position: absolute;
    top: 6px;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 10px;

    .distance_svg_icon {
      height: vh(16);
      width: vh(16);
      background-color: white;
      margin-left: 16px;
      margin-right: 3px;
    }

    span {
      font-size: 12px;
    }
  }

  .battery_comp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 45px;

    .nothing {
      width: 3px;
      height: vh(10);
      background: grey;
    }

    .progress {
      width: 40px;
      height: vh(20);
      border-radius: vh(2);
      justify-content: space-between;
      //background: linear-gradient(to right, green 50%, grey 0%) no-repeat;
      font-size: 14px;
      text-align: center;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}

.showbtn {
  position: absolute;
  top: vh(70);
  left: 10px;
  height: 30px;
  width: 30px;
  background: rgba(15, 57, 102, 0.8);
  padding: 0 5px;
  border: 1px solid rgba(28, 193, 255, 0.6);
  font-size: 18px;
  line-height: 30px;
  color: #f4f4f5;
  cursor: pointer;
  z-index: 999;
  pointer-events: all;
}
.controlUserBox {
  font-size: 12px;
  color: #ffffff;
  line-height: 32px;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  .monitor_user {
    display: flex;
    word-break: break-all;
    white-space: nowrap;
    padding: 0 15px;
    margin-bottom: 2px;
    width: max-content;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;

    .jianshi_img {
      align-items: center;
      padding-right: 6px;
      > img {
        width: 20px;
        height: 20px;
      }
    }
    > span {
      padding-left: 6px;
      padding-right: 8px;
    }

    > div {
      display: flex;

      > p {
        padding: 0 2px;
        margin: 0;
      }
    }
  }

  .control_user {
    display: flex;
    word-break: break-all;
    white-space: nowrap;
    width: max-content;
    padding: 0 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    display: flex;
    margin-bottom: 5px;
    .jianshi_img {
      display: flex;
      align-items: center;
      padding-right: 6px;
      > img {
        width: 20px;
        height: 20px;
      }
    }
    > span {
      padding-left: 6px;
      padding-right: 8px;
    }

    > p {
      padding: 0 2px;
      margin: 0;
    }
  }
}
</style>
